<script lang="ts" setup>
  const props: Object = defineProps({
    title: {
      type: String,
      default: ''
    }
  })
</script>
<template>
  <div class="panel-wrap">
    <div class="title">
      <i class="iconfont icon-youjiantou"/>
      <span>{{ props.title }}</span>
      <div class="condition">
        <slot name="condition"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/styles/theme';

  .panel-wrap {
    padding: 0 0px;
    background: $panel-background;
    border: $panel-border;
    border-image: $panel-border-image;
    color: $panel-color;
    box-shadow: $panel-box-shadow;
    backdrop-filter: $panel-backdrop-filter;
    display: inline-block;
    margin-left: 20px;
    box-sizing: content-box;

    .title {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      color: $panel-color;

      border-bottom: $panel-border-bottom;

      i {
        float: left;
      }

      span {
        float: left;
        margin-left: 10px;
        font-size: 16px;
      }
    }

    .content {
      overflow: hidden;
      height: calc(100% - 38px);

      //&:hover {
      //  overflow-y: auto;
      //}
    }
  }
</style>
